<template>
	
	<view class="fans-nav-list">
		<view class="custom-nav-box">
			<scroll-view class="custom-nav" scroll-x="true" show-scrollbar="false" scroll-with-animation :scroll-left="lineBoxLeft">
				<view class="nav" v-for="(item, index) in navData" :key="index" @click="changeNav(index)" :class="index === navIndex? 'change-nav':'nav'">
					<!-- 数据格式在此修改 -->
					{{item.name}}
				</view> 
			</scroll-view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				// 以下数值动态生成
				devideWidth: 0,
				lineBoxLeft: 0,
				navIndex: 0,
				leftcount:0,//左边移动距离
			};
		},
		props:{
			navData: {},
			changeNavIndex: Number
		},
		watch:{
			changeNavIndex(navIndex) {
				this.navIndex = navIndex
				this.changeNav(navIndex)
			}
		},
		methods:{
			setLineWidth() {
				let screen = uni.getSystemInfoSync()
				 this.devideWidth = screen.screenWidth
				 uni.createSelectorQuery().select(".change-nav").boundingClientRect((res)=>{
					 if(res != null && res != 'null'){
						let navLeft = res.left
					}else{
						return false
					}
				 }).exec()				 
			},
			changeNav(index) {
				this.navIndex = index
				let navLeft=0
				uni.createSelectorQuery().select(".change-nav").boundingClientRect((res)=>{
					let navLeft = res.left == null ? 0 : res.left
					let screen = uni.getSystemInfoSync()
					this.devideWidth = screen.screenWidth
					if(navLeft > 300){
						this.leftcount=this.leftcount+1
						this.lineBoxLeft = this.leftcount * 200
					}
					if(navLeft<0){
						this.lineBoxLeft=this.lineBoxLeft-300
					}
					
				}).exec()
				this.$emit('changeTab', index)
			}
		},
		mounted() {
			this.$nextTick(function(){
				this.setLineWidth()
			})
		}
		
	}
</script>

<style lang="less">
	.fans-nav-list{
		position:sticky;
		height:60upx;
		line-height:60upx;
		width:100%;
		z-index: 100;
		background: #FFFFFF;
		border-bottom:5upx solid #F5F5F5;
	}
	.custom-nav-box {
		height: auto;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		.custom-nav {
			display: flex;
			white-space: nowrap;
			.nav {                     // 未选中字体样式
				display: inline-block;
				padding: 0 20rpx;
				font-size: 28rpx;
				color: #000000;
			}
			.change-nav {               // 选中字体样式
				font-size: 32rpx;
				font-weight: bold;
				color: #F76260;
			}
		}
		.custom-nav-line {
			position: relative;
			height: 4rpx; //下划线高度
			display: flex;
			width:100%;
			.line {
				height: 100%;
				transition: .5s;
				width:10%;
				text-align: center;
			}
		}
	}
</style>
